<template>
  <div class="body" v-if="isRouterAlive">
    <!-- 头部 -->
    <div class="head">
      <div class="head-left">
        <Icon icon="ic:baseline-notes" color="#999" :size="24" />
        <!-- <button></button> -->
        <p>指标管理--评价进度</p>
      </div>
      <div class="head-right">
        <Icon icon="typcn:export" color="#54b46b" :size="30" />
        <p @click="isImport = true" style="background-color: ">信息导出</p>
      </div>
      <!-- 弹窗 -->
      <Dialog v-model="isImport" class="import" title="导入指标">
        <div class="dialog">
          <div class="dialog_left">
            <div>下载模板: <span style="color: #4996e2">指标导入模版.xls</span></div>
            <div>选中文件: <span style="color: #fd891d">选择文件xls</span></div>
            <div
              >已选文件: <span>{{ fileName }}</span></div
            >
          </div>
          <div class="dialog_right">
            <div class="content">
              <p>导入说明：</p>
              <p>每项评价类型占比加在 一起需为百分百</p>
            </div>
          </div>
        </div>
        <div class="foot">
          <ElButton
            round
            style="width: 45%"
            @click="
              () => {
                isImport = false
                isImportB = true
                fileName = '暂未选文件'
              }
            "
            >取消</ElButton
          >
          <ElUpload
            v-if="isImportB"
            style="width: 45%"
            accept=".xls,.xlsx"
            v-model:file-list="fileList"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="Excel"
          >
            <ElButton round type="success" class="green" ref="import">选择文件</ElButton>
          </ElUpload>
          <ElButton v-else round type="success" class="green" style="width: 45%" @click="importok()"
            >导入</ElButton
          >
        </div>
      </Dialog>
      <!-- 错误弹窗 -->
      <Dialog v-model="isError" class="import error">
        <Icon
          style="margin-left: 125px"
          icon="ic:baseline-circle-notifications"
          color="#fe7137"
          size="100"
        />
        <p style="text-align: center"
          >导入有误，下载 <span style="color: #3d90df">错误文件</span></p
        >
        <div class="foot">
          <ElButton
            round
            style="width: 45%"
            @click="
              () => {
                isError = false
              }
            "
            >取消</ElButton
          >
          <ElButton
            round
            style="width: 45%"
            @click="
              () => {
                isError = false
              }
            "
            type="success"
            class="green"
            >确定</ElButton
          >
        </div>
      </Dialog>
    </div>
    <!-- 搜索框 -->
    <ElForm>
      <ElFormItem label="学期" label-position="left">
        <ElSelect v-model="value" style="width: 30%">
          <ElOption
            v-for="item in school"
            :key="item.semester_id"
            :label="item.semester_name"
            :value="item.semester_id"
          />
        </ElSelect>
        <ElButton
          type="primary"
          style="margin-left: 30px; width: 80px; background-color: #2c8e79; border: none"
          @click="Query()"
        >
          查询</ElButton
        >
      </ElFormItem>
    </ElForm>
  </div>
  <!-- 未做完弹窗 -->
  <Dialog v-model="isTable" class="import table1" title="信息详情">
    <Table
      :columns="NotDone1"
      v-model:data="NotDonedata.data"
      :selection="false"
      align="center"
      headerAlign="center"
    />
  </Dialog>
  <!-- 左边 -->
  <div class="table">
    <div class="left">
      <div class="head"> <p>进度详情</p></div>
      <Table
        :columns="columns"
        v-model:data="data.data"
        :selection="false"
        align="center"
        headerAlign="center"
      />
    </div>
    <!-- 右边 -->

    <div class="right">
      <div class="top">
        <div class="head" @click="onClick()"> <p>未做人数详情</p></div>
        <Table
          :pageSize="4"
          :columns="NotDone"
          v-model:data="data2.data"
          :selection="false"
          align="center"
          headerAlign="center"
        />
      </div>
      <div class="bottom">
        <div class="head" @click="onClick()"> <p>等级含D</p></div>
        <Table
          :pageSize="4"
          :columns="levelD"
          v-model:data="data2.data"
          :selection="false"
          align="center"
          headerAlign="center"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { schoolList } from '@/api/semester'
import { Table } from '@/components/Table'
import { TableColumn } from '@/types/table'
import { h, nextTick, reactive } from 'vue'
import { semesterApi, addSchool } from '@/api/semester'
import {
  ElFormItem,
  ElOption,
  ElSelect,
  ElForm,
  ElButton,
  UploadUserFile,
  ElUpload
} from 'element-plus'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Dialog } from '@/components/Dialog'
import { read, utils } from 'xlsx'

const school = reactive((await semesterApi()).data)
const value = ref(school[0].semester_id)
const appraise = reactive((await schoolList()).data)
const router = useRouter()
// 弹窗打开
const isImport = ref(false)
let data = reactive({ data: appraise })
const fileList = ref<UploadUserFile[]>([])
for (var item1 in appraise) {
  //console.log('11', item, json[item])
  if (item1 == value.value) {
    data.data = appraise[item1]
  }
}
let data1 = reactive(data)
data1.data.sort((a, b) => {
  return b.incomplete - a.incomplete
})
let data2 = reactive({ data: data1.data.slice(0, 4) })
const columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index'
  },
  {
    field: 'school',
    label: '学校',
    formatter: (row, _column, cellValue, _index) => {
      const color = { style: { color: '#68a4e4' }, onClick: () => School(row.id) }
      // return cellValue != undefined ? h('div', color, cellValue) : ''
      return h('div', color, cellValue)
    }
  },
  {
    field: 'numPeople',
    label: '总人数'
  },
  {
    field: 'completion',
    label: '完成率',
    sortable: true,
    formatter: (_row, _column, cellValue, _index) => {
      const color = { style: { color: 'red' } }
      const num = parseInt(cellValue)
      // return cellValue != undefined ? h('div', color, cellValue) : ''
      return num < 60 ? h('div', color, cellValue) : cellValue
    }
  }
])
const NotDone = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index'
  },
  {
    field: 'school',
    label: '学校',
    formatter: (row, _column, cellValue, _index) => {
      const color = { style: { color: '#68a4e4' }, onClick: () => School(row.id) }
      // return cellValue != undefined ? h('div', color, cellValue) : ''
      return h('div', color, cellValue)
    }
  },
  {
    field: 'numPeople',
    label: '总人数'
  },
  {
    field: 'incomplete',
    label: '未做完人数',
    formatter: (_row, _column, cellValue, _index) => {
      const color = { style: { color: 'red' } }
      // return cellValue != undefined ? h('div', color, cellValue) : ''
      return h('div', color, cellValue)
    }
  }
])
const levelD = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index'
  },
  {
    field: 'school',
    label: '学校',
    formatter: (row, _column, cellValue, _index) => {
      const color = { style: { color: '#68a4e4' }, onClick: () => School(row.id) }
      // return cellValue != undefined ? h('div', color, cellValue) : ''
      return h('div', color, cellValue)
    }
  },
  {
    field: 'numPeople',
    label: '总人数'
  },
  {
    field: 'levelD',
    label: '等级含D',
    formatter: (_row, _column, cellValue, _index) => {
      const color = { style: { color: 'red' } } // return cellValue != undefined ? h('div', color, cellValue) : ''
      return h('div', color, cellValue)
    }
  }
])
// 未做完详情表头数据
const NotDone1 = reactive<TableColumn[]>([
  {
    field: 'school',
    label: '学校'
  },
  {
    field: 'name',
    label: '姓名'
  },
  {
    field: 'grade',
    label: '年级'
  },
  {
    field: 'class',
    label: '班级'
  },
  {
    field: 'teacher',
    label: '班主任'
  }
])
// 未做完详情表数据
const NotDonedata = reactive({ data: appraise })
// 点击未做完和含D

// 选中的文件名
const fileName = ref('暂未选择文件')
// 导入指标中按钮的文字的切换
const isImportB = ref(true)
// 导入表的数据
const wsData = reactive({ data: null })
// 控制未做完弹窗
const isTable = ref(false)
const onClick = () => {
  isTable.value = true
  NotDonedata.data = new Array(0)
  for (let i = 0; i <= 10; i++) {
    NotDonedata.data.push({
      school: '云龙小学',
      name: '张明',
      grade: '一年级',
      class: '01班',
      teacher: '留言'
    })
  }
  //NotDonedata.data = null
}
const Query = () => {
  data.data = []
  for (var item1 in appraise) {
    if (item1 == value.value) {
      data.data = appraise[item1]
    }
  }
  data1.data = data.data
  data1.data.sort((a, b) => {
    return b.incomplete - a.incomplete
  })
  data2.data = data1.data.slice(0, 4)
}
const School = (id) => {
  router.push({ path: `/evaluation/progress/school`, query: { Id: id } })
}
const Excel = (file, _fileList) => {
  const files = { 0: file.raw } // 取到File
  readExcel(files, file.name)
}
const readExcel = (files, name) => {
  // 表格导入
  if (files.length <= 0) {
    // 如果没有文件名
    return false
  } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
    console.log('错误')
    return false
  }
  //控制页面刷新
  const fileReader = new FileReader()
  fileReader.onload = (files) => {
    try {
      //@ts-ignore
      const data = files.target.result
      const workbook = read(data, {
        type: 'binary'
      })
      const wsname = workbook.SheetNames[0] // 取第一张表
      const ws = utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
      fileName.value = name
      //@ts-ignore
      wsData.data = ws
      isImportB.value = false
    } catch (e) {
      console.log(e)
      return false
    }
  }
  fileReader.readAsBinaryString(files[0])
}
const isRouterAlive = ref(true)
// 控制错误弹窗
const isError = ref(false)
const reload = () => {
  isRouterAlive.value = false
  nextTick(() => {
    isRouterAlive.value = true
  })
}
// 导入
const importok = () => {
  //@ts-ignore
  if (wsData.data[0]['学期'] == null) {
    console.log('错误')
    isImport.value = false
    isImportB.value = true
    fileName.value = '暂未选文件'
    isError.value = true
    return false
  }
  //@ts-ignore
  wsData.data.forEach(async (i) => {
    i['学期'] = i['学期'].replace('-', '')
    i['学期'] = i['学期'].replace('第一学期', '1')
    i['学期'] = i['学期'].replace('第二学期', '2')
    await addSchool(i)
    //console.log(i)
    isImport.value = false
    isImportB.value = true
    fileName.value = '暂未选文件'
    reload()
  })
}
</script>

<style scoped lang="less">
.table {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .left {
    width: 49%;
    background-color: #fff;
    padding: 0px 20px;
  }
  .right {
    width: 49%;
  }
  .top,
  .bottom {
    background-color: #fff;
    padding: 0px 20px 20px;
  }
  .head {
    margin: 10px 0;
    width: 126px;
    height: 24px;
    background-image: url('/public/background/title_br.png');
    p {
      margin-left: 12px;
      font-weight: bolder;
      font-size: 16px;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .bottom {
    margin-top: 20px;
  }
}

.body {
  background-color: #fff;
  border-radius: 10px;
  padding: 0 25px 10px;
  .head {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    .head-left {
      display: flex;
      p {
        margin-left: 10px;
        color: #797979;
      }
    }
    .head-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        margin-top: 5px;
        font-size: 10px;
        border: #efefef 1px solid;
        padding: 0 10px;
        border-radius: 5px;
      }
    }
  }
}
.import .foot {
  display: flex;
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 23%;
  justify-content: space-between;
  .green {
    width: 85px !important;
    background-color: #2b8f79 !important;
  }
}
.dialog {
  display: flex;
  .dialog_right {
    width: 45%;
    .content {
      height: 100%;
      background-color: #eff6fb;
      padding: 10px;
      border-radius: 10px;
    }
  }
  .dialog_left {
    width: 55%;
    padding: 0 10px;
    div {
      margin-top: 10px;
      font-size: 14px;
      border-bottom: 1px solid #f3f3f3;
    }
  }
}
.error .import .foot {
  border-top: 1px solid #f5f8ff;
  display: flex;
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 23%;
  justify-content: space-between;
  .green {
    width: 85px !important;
    background-color: #2b8f79 !important;
  }
}
</style>

<style lang="less">
.el-table th.el-table__cell {
  background-color: #dff3de;
  color: #67b782;
}
.import .el-dialog__header {
  background-color: #ebf7eb;
  color: #72c08c;
  border-top-right-radius: 20px !important;
  border-top-left-radius: 20px !important;
}
.import {
  border-radius: 20px !important;
  width: 400px !important;
  height: 250px;
  .el-scrollbar {
    height: 170px !important;
  }
  .el-dialog__body {
    padding: 15px 15px 0px !important;
  }
}
.error {
  border-radius: 20px !important;
  width: 400px !important;
  height: 250px !important;
  .el-scrollbar {
    height: 185px !important;
  }
  .el-dialog__header {
    color: #fff !important;
    background-color: #fff;
    height: 0px;
    margin: 0px;
    border-bottom: 0px;
  }
}
.error {
  border-radius: 20px !important;
  width: 400px !important;
  height: 250px !important;
  .el-scrollbar {
    height: 185px !important;
  }
  .el-dialog__header {
    color: #fff !important;
    background-color: #fff;
    height: 0px;
    margin: 0px;
    border-bottom: 0px;
  }
}
.table1 {
  border-radius: 20px !important;
  width: 800px !important;
  height: 600px !important;
  .el-scrollbar {
    height: 500px !important;
  }
  th.el-table__cell {
    background-color: #fff;
    color: #67b782;
  }
}
</style>
